<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Awesome-pyecharts</title>
    <link rel="stylesheet" type="text/css" href="styles.css"></link>
  </head>
  <body>
    <form id="uploadForm">
      <input type="file" id="fileInput" name="file">
      <button type="button" onclick="uploadFile()">上传文件</button>
      <a
        href="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
        download="download.png"
        id="download"
      >
        图片下载
      </a>
  </form>
    <script>
      function uploadFile() {
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        console.log('file', file)

        if (file) {
            var formData = new FormData();
            formData.append('file', file);
            console.log('formData', formData)

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);
            xhr.onload = function () {
                if (xhr.status == 200) {
                    alert('文件上传成功');
                } else {
                    alert('文件上传失败');
                }
            };
            const data = JSON.stringify({file: formData })
            xhr.send(data);
        } else {
            alert('请选择一个文件');
        }
    }
    document.getElementById('download').addEventListener('click', (e) => {
      // e.preventDefault()
    })
    function downloadFile(url, fileName) {
      // 创建一个隐藏的<a>元素
      var anchorElement = document.createElement('a');
      anchorElement.style.display = 'none';
      
      // 设置href属性为文件的URL
      anchorElement.href = url;
      
      // 设置download属性为下载的文件名
      anchorElement.download = fileName || 'download';

      // 将<a>元素添加到body中
      document.body.appendChild(anchorElement);

      // 模拟点击事件
      anchorElement.click();

      // 下载完成后从body中移除<a>元素
      document.body.removeChild(anchorElement);

      // 如果url是一个通过createObjectURL创建的Blob URL，需要撤销它
      if (url.startsWith('blob:')) {
          window.URL.revokeObjectURL(url);
      }
  }

    // 使用示例
    // 假设你有一个Blob对象或Data URI
    // var blob = new Blob(['这里是文件内容'], { type: 'text/plain;charset=utf-8' });
    // var url = URL.createObjectURL(blob);

    // 调用函数下载文件
    downloadFile('http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960', 'download.png');
    </script>
  </body>
</html>
